<style media="screen">
  .flow-list-item:last-child{
    border-bottom: none;
  }
  .head-container{
    position: relative;
    padding: 10px 0 14px;
  }
  .head-container .mes{
    margin-right: 10px;
    float: left;
  }
  .head-container .mes p{
    font-size: 12px;
    color:#CFCFCF;
    margin-bottom: 6px;
  }
  .head-container .mes input{
    width: 160px;
    height: 34px;
  }
  .head-container .flow{
    float: left;
    margin-right: 10px;
  }
  .head-container .flow p{
    font-size: 12px;
    color:#CFCFCF;
    margin-bottom: 6px;
  }
  .head-container .flow .flow-select{
    width: 140px;
    height: 34px;
  }
  .head-container .button-group{
    padding-top: 23px;
  }
</style>


<section class="flow-list">
  <hl-page-header title="流程配置列表">
    <hl-button type="outline" @on-click="goPage">新增流程</hl-button>
  </hl-page-header>

  <div class="head-container clearfix">
    <div class="clearfix">
      <div class="flow mr-10">
        <p>流程名称</p>
				<hl-select :data="lcName" v-model="params.name" width="120" @on-change="selectedCC"></hl-select>
      </div>
      <div class="flow">
        <p>版本号</p>
        <div class="pull-left">
          <input type="text" class="global_ipt_text" v-model="params.no" autocomplete="off"  style="width:120px;">
        </div>
      </div>
      <div class="flow">
        <p>信息搜索</p>
        <div class="global_search">
          <span class="icon-Gm-search"></span>
          <input
            autocomplete="off"
            type="text"
            class="global_ipt_text"
            placeholder="备注"
            v-model="params.memo"
           />
        </div>
      </div>
      <div class="flow">
        <p>状态</p>
				<hl-select :data="lcqjName" v-model="params.state" width="120" @on-change="selectedTypeCode"></hl-select>
      </div>

      <div class="button-group">
        <hl-button @on-click="searchFlow" size="mini">查询</hl-button>
        <hl-button @on-click="resetFlow" size="mini">重置</hl-button>
      </div>
    </div>
  </div>

  <section class="br-4 flow-list-container line-height-40 global_table" style="border:1px solid #E5E5E5">
    <div class="dy-flex border-b text-center global_table_title">
      <div class="dy-fx-1">序</div>
      <div class="dy-fx-2">流程名称</div>
      <div class="dy-fx-2">备注</div>
      <div class="dy-fx-3">生效时间</div>
      <div class="dy-fx-2">版本号</div>
      <div class="dy-fx-2">是否默认</div>
      <div class="dy-fx-2">状态</div>
      <div class="dy-fx-2">流程图</div>
      <div class="dy-fx-3 border-l">操作</div>
    </div>
    <div>
      <ul class="dy-flex flow-list-item text-center global_table_item" v-for="(item,index) in flowList.bpdefs" :id="item.id" style="margin:0">
        <li class="dy-fx-1">{{index + 1 < 10 ? '0' + (index + 1) : index + 1 }}</li>
            <li class="dy-fx-2">{{item.name}}</li>
            <li class="dy-fx-2 ellipsis-1" :title="item.memo">{{item.memo || '--'}}</li>
            <li class="dy-fx-3">{{item.validTime | formatDate | formatUndefined}}</li>
            <li class="dy-fx-2">{{item.version | formatUndefined}}</li>
            <li class="dy-fx-2">{{item.isDefault == 'Y'?'是':'否'}}</li>
            <li class="dy-fx-2">{{item.valid == 'Y'?'启用':'停用'}}</li>
            <li class="dy-fx-2">
              <a class="cursor" :id="item.id" :image-src="item.pic" @click="showFlowImage(item.id)">查看</a>
            </li>
            <li class="dy-fx-3 border-l">
              <a href="javascript:;" class="mr-5" @click="setValid(item.valid,item.id,item.bpmKey)">{{item.valid == 'Y'?'停用':'启用'}}</a>
              <a href="javascript:;" @click="goEdit(item.bpmKey,item.id)">编辑</a>
            </li>
      </ul>
    </div>
  </section>

  <div class="user-page ptb-10 clearfix">
    <div class="pull-left user-page-num">
      <span class="font-14">共<i>{{params.totalCount}}</i>条记录</span>
      <span>每页<hl-select :data="pages" v-model="params.limit" width="80" @on-change="setGetFlowList"></hl-select>条</span>
    </div>
    <div class="pull-right">
      <hl-pagination v-model="params.currentPage" :total="params.totalPage" @change="getFlowListData"></hl-pagination>
    </div>
  </div>

  <!--流程图-->
  <section class="flowlist-image-cr pop box-o-shadow" v-if="isShowImage">
    <div class="image-title">
      <h3>流程图</h3>
      <span class="close" @click="closeFlowImage">×</span>
    </div>
    <div class="content">
      <div class="flowlist-image">
        <div class="begin-circle">开始</div>

        <div class="middle-node-container relative">
          <ul class="middle-node-wrapper clearfix">
            <li class="node-item" v-for="(item,index) in flowNode">
              <div class="node-order">{{index + 1}}</div>
              <div class="node-name">{{item.name}}</div>
              <p class="person" v-if="item.userNames.length">{{item.userNames.join('/')}}</p>
            </li>
          </ul>
        </div>

        <div class="end-circle">结束</div>
      </div>
    </div>
  </section>
  <div class="backdrop" v-if="isShowImage"></div>
</section>
<script src="modules/flow/scripts/flow_list.js" charset="utf-8"></script>
